<template>
	<el-dialog width="630" title="排课" v-model="dialogVisible">
		<div class="container">
			<div class="calendar">
				<ul class="weekdays">
					<li>一</li>
					<li>二</li>
					<li>三</li>
					<li>四</li>
					<li>五</li>
					<li>六</li>
					<li>日</li>
				</ul>
				<ul class="days">
					<li class="days-item" v-for="i in spareDays" :key="i" />
					<li v-for="item in lessonData" :key="item.id" :class="{ selected: item.teached }"
						@click="handleClick(item)">
						<div class="date">{{ item.date.split('-')[1] }}-{{ item.date.split('-')[2] }}</div>
						<div class="year">{{ item.date.split('-')[0] }}</div>
					</li>
				</ul>
			</div>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="warning" @click="selectAll">全选</el-button>
				<el-button type="primary" @click="saveWork">保存</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { getWorkGetApi, postWorkAOUApi } from '@renderer/api/class';
import { WorkItem } from '@renderer/interface/class';
import { ref, watch } from 'vue';

/* 父组件传参 */
const props = defineProps<{ id: string }>()
const emits = defineEmits(['addsuccess'])
const dialogVisible = defineModel({ default: false })

// 查询排课信息
const lessonData = ref<WorkItem[]>([])
// 空白占位日期
const spareDays = ref(0)
const getWorkGetData = async () => {
	const { code, data } = await getWorkGetApi({ classId: props.id })
	if (code !== '200') return

	lessonData.value = data
	// 返回排课数组中的第一个里的日期对应的星期数并-1
	spareDays.value = new Date(lessonData.value[0].date).getDay() - 1
}

// 点击排课
const handleClick = (item: WorkItem) => {
	if (item.id) return ElMessage.info('已经排课了~')
	item.teached = item.teached ? 0 : 1
	return
}
// 全选按钮
const selectAll = () => {
	if (lessonData.value[0].id) return ElMessage.info('已经排课了~')
	lessonData.value.forEach(item => {
		item.teached = 1
	})
	return
}

// 保存按钮
const saveWork = async () => {
	const { code } = await postWorkAOUApi(lessonData.value)
	if (code !== '200') return

	ElMessage.success('排课成功~')
	dialogVisible.value = false
}

watch(() => dialogVisible.value, () => {
	if (dialogVisible.value) {
		getWorkGetData()
	} else {

	}
})
</script>

<style scoped lang="scss">
.container {
	display: flex;
	justify-content: space-between;

	.calendar {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		width: 588px;
		border: #f2f2f2 solid 1px;

		.weekdays {
			width: 100%;
			display: flex;
			list-style: none;

			li {
				flex: 1;
				font-weight: bold;
				font-size: 16px;
				line-height: 35px;
				height: 35px;
				background: var(--el-color-info-light-9);
				cursor: pointer;
			}
		}

		.days {
			width: 100%;
			min-height: 240px;
			display: flex;
			flex-wrap: wrap;
			list-style: none;

			li {
				box-sizing: border-box;
				width: calc(100% / 7 - 10px);
				height: 74px;
				border: 2px solid #409EFF;
				margin: 5px;
				cursor: pointer;
				border-radius: 5px;
				color: #193f6e;
				overflow: hidden;

				.date {
					width: 100%;
					height: 44px;
					line-height: 44px;
					font-size: 20px;
					font-weight: bold;
				}

				.year {
					width: 100%;
					height: 30px;
					line-height: 30px;
					background: rgba(64, 158, 255, 1);
					color: #fff !important;
				}
			}
		}
	}
}

.days-item {
	border: transparent solid 1px !important;
}

.selected {
	background: rgba(64, 158, 255, .7);

	.date {
		width: 100%;
		height: 50px;
		line-height: 50px;
		font-size: 24px;
		color: #fff !important;
	}

	.year {
		width: 100%;
		height: 30px;
		line-height: 30px;
		background: rgba(64, 158, 255, 1);
		color: #fff !important;
	}
}
</style>